import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title, Text } = Typography;
const { TextArea } = Input;

export default function ZhihuCopywriting() {
  const [form] = Form.useForm();
  const [isGenerating, setIsGenerating] = useState<boolean>(false);
  const [generatedContent, setGeneratedContent] = useState<string>('');
  const [tourVisible, setTourVisible] = useState(false);

  // 使用HTML元素的ref引用方式
  const questionRef = useRef<HTMLDivElement>(null);
  const viewpointRef = useRef<HTMLDivElement>(null);
  const styleRef = useRef<HTMLDivElement>(null);
  const evidenceRef = useRef<HTMLDivElement>(null);
  const submitRef = useRef<HTMLDivElement>(null);
  const resultRef = useRef<HTMLDivElement>(null);

  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 生成知乎文案的模拟函数
  const generateContent = (question: string, viewpoint: string, evidence: string, style: string): string => {
    // 这里是模拟生成内容的逻辑，实际应用中应该调用AI模型
    let result = `### ${question}\n\n`;

    // 根据风格调整开头
    if (style === '专业分析') {
      result += "作为一名在该领域有多年研究经验的专业人士，我想从以下几个方面来回答这个问题：\n\n";
    } else if (style === '经验分享') {
      result += "我曾经也遇到过类似的问题，通过不断尝试和总结，我有一些经验想和大家分享：\n\n";
    } else if (style === '逻辑推理') {
      result += "这个问题可以从逻辑学的角度进行分析，让我们一步步来梳理：\n\n";
    } else if (style === '故事叙述') {
      result += "我先给大家讲一个真实的故事，相信听完后你会对这个问题有更深的理解：\n\n";
    }

    // 核心观点
    if (viewpoint) {
      result += `**我的核心观点是：${viewpoint}**\n\n`;
    } else {
      result += "**我的核心观点是：** 这个问题需要从多角度进行分析，不能简单地给出非黑即白的答案。\n\n";
    }

    // 论据支持
    if (evidence) {
      result += "### 论据支持\n";
      result += evidence + '\n\n';
    } else {
      result += "### 论据支持\n";
      result += "1. **理论依据**：根据相关领域的研究理论，我们可以得出...\n\n";
      result += "2. **数据支持**：最新的统计数据显示，在过去的几年中...\n\n";
      result += "3. **案例分析**：以XX公司为例，他们通过XX策略取得了显著成效...\n\n";
    }

    // 分点论述（知乎风格）
    result += "### 分点论述\n";
    result += "1. **第一点**：首先，我们需要明确问题的本质是什么...\n\n";
    result += "2. **第二点**：其次，我们要考虑到各种可能的影响因素...\n\n";
    result += "3. **第三点**：最后，我们还需要思考长期发展趋势...\n\n";

    // 总结
    result += "### 总结\n";
    result += "综上所述，我认为这个问题的最佳解决方案是...\n\n";

    // 知乎风格的结尾引导
    result += "如果你觉得我的回答对你有帮助，欢迎点赞、收藏和关注我，我会定期分享更多专业见解。有任何不同意见，也欢迎在评论区留言讨论。\n\n";

    return result;
  };

  // 处理表单提交
  const handleSubmit = async (values: any) => {
    try {
      setIsGenerating(true);
      const { question, viewpoint, evidence, style } = values;

      // 模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 1500));

      const generated = generateContent(question, viewpoint, evidence, style);
      setGeneratedContent(generated);
      message.success('知乎文案生成成功！');
    } catch (error) {
      message.error('生成失败，请稍后重试');
    } finally {
      setIsGenerating(false);
    }
  };

  // 复制生成的内容
  const handleCopy = () => {
    navigator.clipboard.writeText(generatedContent).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败');
    });
  };

  // 下载生成的内容
  const handleDownload = () => {
    const blob = new Blob([generatedContent], { type: 'text/plain;charset=utf-8' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '知乎文案.txt';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
    message.success('文件下载成功');
  };

  // 定义引导步骤
  const tourSteps = [
    {
      key: 'question',
      title: '输入问题标题',
      description: '请输入知乎问题标题',
    },
    {
      key: 'viewpoint',
      title: '输入核心观点（可选）',
      description: '请输入你的核心观点，帮助生成更符合你想法的回答',
    },
    {
      key: 'style',
      title: '选择回答风格',
      description: '选择你想要的知乎回答风格，如专业分析、经验分享等',
    },
    {
      key: 'evidence',
      title: '输入论据支持（可选）',
      description: '请输入支持你观点的论据，如不填写将自动生成',
    },
    {
      key: 'submit',
      title: '生成知乎文案',
      description: '点击按钮生成符合知乎平台的文案',
    },
    {
      key: 'result',
      title: '查看生成结果',
      description: '生成成功后，您可以在此处查看、复制或下载生成的文案',
    },
  ];

  // 组织ref引用
  const tourRefs = {
    question: questionRef,
    viewpoint: viewpointRef,
    style: styleRef,
    evidence: evidenceRef,
    submit: submitRef,
    result: resultRef,
  };

  // 风格选项
  const styleOptions = [
    { label: '专业分析', value: '专业分析' },
    { label: '经验分享', value: '经验分享' },
    { label: '逻辑推理', value: '逻辑推理' },
    { label: '故事叙述', value: '故事叙述' },
  ];

  return (
    <>
      <div style={{ padding: '24px' }}>
        <div style={{ marginBottom: 24 }}>
          <Title level={2} style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
            知乎文案生成
            <TourGuideButton onClick={showTour} />
          </Title>
        </div>
        <Card style={{ marginBottom: '24px' }}>
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={{
              style: '专业分析',
            }}
          >
            <Row gutter={[16, 16]}>
              <Col xs={24}>
                <Form.Item
                  name="question"
                  label="问题标题"
                  rules={[{ required: true, message: '请输入问题标题' }]}
                >
                  <div ref={questionRef}>
                    <Input placeholder="请输入知乎问题标题" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="viewpoint"
                  label="核心观点"
                >
                  <div ref={viewpointRef}>
                    <Input placeholder="请输入你的核心观点（可选）" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="style"
                  label="回答风格"
                  rules={[{ required: true, message: '请选择回答风格' }]}
                >
                  <div ref={styleRef}>
                    <Select placeholder="请选择回答风格" options={styleOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="evidence"
                  label="论据支持（可选）"
                >
                  <div ref={evidenceRef}>
                    <TextArea rows={4} placeholder="请输入支持你观点的论据，如不填写将自动生成" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item>
                  <div ref={submitRef}>
                    <Button type="primary" htmlType="submit" loading={isGenerating} style={{ width: '100%' }}>
                      {isGenerating ? <Spin /> : '生成知乎文案'}
                    </Button>
                  </div>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>

        {generatedContent && (
          <Card title="生成结果" extra={
            <div style={{ display: 'flex', gap: '8px' }}>
              <Button icon={<CopyOutlined />} onClick={handleCopy}>复制</Button>
              <Button icon={<DownloadOutlined />} onClick={handleDownload}>下载</Button>
            </div>
          }>
            <div ref={resultRef} style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: 1.6 }}>
              {generatedContent}
            </div>
          </Card>
        )}
      </div>

      <CommonTour
        open={tourVisible}
        onClose={() => setTourVisible(false)}
        steps={tourSteps}
        targetRefs={tourRefs}
      />
    </>
  );
}